<template>
  <div>
    <el-upload
      :class="{disabled:uploadDisabled}"
      :action="actionUrl"
      :data="this.formData.uploadData"
      v-model="form.imageCertId"
      :name="formData.fileName"
      list-type="picture-card"
      :headers="header"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-success="handleAvatarSuccess"
      :file-list="imageUrlData"
      :disabled="isDisabled"
      :before-upload="beforeAvatarUpload">
      <i class="el-icon-plus"/>
    </el-upload>

    <el-dialog :visible.sync="nationalDialogVisible" append-to-body>
      <img width="100%" :src="form.imageCertId" alt="">
    </el-dialog>

  </div>
</template>

<script>
  import {getToken} from "../../utils/auth";
  import {delDocumentfile} from "../../api/document";

  export default {
    name: "documentimage",
    data() {
      return {
        form: {
          imageCertId: ''
        },
        header: {
          "Authorization": `Bearer ${getToken()}`
        },
        imageUrlData: [],
        fileList: [],
        isAddBuiness: false,
        businessid: '',
        nationalDialogVisible: false,
        imageUrls: [],
        actionUrl: process.env.VUE_APP_BASE_API + '/system/upload',
        formData: {
          fileName: 'file',
          uploadData: {
            name: this.name,
            remark: this.filetype, //用于表示当前操作是图集还是文件上传  file  image
            f1: this.nametype,
          }
        },
      }
    },
    props: {
      name: {
        type: String
      },
      filetype: {
        type: String
      },
      isDisabled: {
        type: Boolean
      },
      nametype: {
        type: String
      },
    },
    methods: {
      uploadDisabled: function () {
        return this.imageUrlData.length > 0
      },
      getImages() {
        return this.imageUrls;
      },
      clearImages() {
        this.imageUrls = [];
      },
      isAddInfoAction(flag) {  //盘点当前业务是新增还是修改
        this.isAddBuiness = flag;
      },
      showImage(imageData, eqsn) {
        this.businessid = eqsn;
        this.imageUrlData = [];
        this.imageUrls = [];
        for (let i = 0; i < imageData.length; i++) {
          let image = imageData[i];
          let obj = {};
          obj.url = process.env.VUE_APP_BASE_API + image.fileurl;
          obj.id = image.id;
          this.imageUrlData.push(obj);
          this.form.imageCertId = image.fileurl;
          this.imageUrls.push(image.id)
        }
      },
      //上传照片
      handleAvatarSuccess(res, file) {       //照片成功事件
        this.imageCertId = URL.createObjectURL(file.raw);
        let code = res.code;
        let message = res.msg;
        if (code === 200) {
          let imageCerts = res.data;
          this.form.imageCertId = imageCerts.imgUrl;
          this.$message.success(message);
          // console.log("上传成功后的URL="+imageCerts.id,this.form.imageCertId)
          // if(this.isAddBuiness){
          this.imageUrls.push(imageCerts.id)
          //}
        } else {
          this.$message.error(message);
        }
      },
      beforeAvatarUpload(file) {             //照片成功之前的事件
        this.formData.uploadData.businessid = this.businessid;
        let isJPG = file.type === 'image/jpeg';
        switch (file.type) {
          case "image/png":
            isJPG = true;
            break;
          case "image/jpeg":
            isJPG = true;
            break;
          default:
            isJPG = false;
            this.$message.error('上传图片只能是 JPG/PNG/GIF 格式!');
            break;
        }
        return isJPG;
      },
      handleRemove(file, fileList) {     //照片删除事件
        console.log(JSON.stringify(file));
        let deleteid = undefined;
        if (file.name != null && file.name !== undefined) {
          deleteid = file.response.data.id;
        } else {
          deleteid = file.id;
        }
        if (deleteid != null && deleteid !== undefined) {
          delDocumentfile(deleteid).then(response => {
            if (response.code === 200) {
              this.form.imageCertId = "";
              this.imageUrls.forEach((item, index) => {
                if (file.id === item) {
                  this.imageUrls.splice(index, 1);
                }
              });
              this.$message.success("删除成功");
            }
          });
        }
      },
      handlePictureCardPreview(file) {     //照片中点击文件列表中已上传的文件时的钩子
        this.form.imageCertId = file.url;
        this.nationalDialogVisible = true;
      },
    }
  }
</script>

<style scoped>

</style>
